// 拿到9个div
const tiles = Array.from(document.querySelectorAll('.tile'))
// 获取当前玩家的DOM节点
const playerDisplay = document.querySelector('.display-player')
// 获取当前重置按钮
const resetButton = document.querySelector('#reset')
// 获取游戏结束显示的语句
const announcer = document.querySelector('.announcer')

// 创建一个空数组，保存用户点击的数据
let board = ['','','','','','','','','']
// 创建一个变量，代表当前用户
let currentPlayer = 'X'
// 创建一个变量，true表示游戏正在进行，false为游戏结束
let isGameActive = true

// 三个变量表示游戏的结束状态，PLAYERX_WON为x玩家获胜，PLAYERO_WON为O玩家获胜，TIE为平局
const PLAYERX_WON = 'PLAYERX_WON'
const PLAYERO_WON = 'PLAYERO_WON'
const TIE = 'TIE'

// 定义一个数组，保存游戏获胜的条件
const winningConditions = [
    [0,1,2],
    [3,4,5],
    [6,7,8],
    [0,3,6],
    [1,4,7],
    [2,5,8],
    [0,4,8],
    [2,4,6]
]

// 判断操作是否有效，如果div里没有值，就为有效
const isValidAction = (tile)=>{
    if(tile.innerText === 'X' || tile.innerText === "O"){
        return false
    }
    return true
}

// 保存用户点击的数据(玩家的符号)
const updateBoard = (index) => {
    board[index] = currentPlayer
}

// 定义changePlayer函数来处理玩家的交换（更改当前播报显示的玩家）
const changePlayer = () => {
    playerDisplay.classList.remove(`player${currentPlayer}`)
    currentPlayer = currentPlayer === 'X'? 'O':'X'
    playerDisplay.innerText = currentPlayer
    playerDisplay.classList.add(`player${currentPlayer}`)
}

// 定义一个函数，来宣布游戏结果,并将结果返回呈现在页面上
const announce = (type) => {
    switch(type){
        case PLAYERO_WON:
            announcer.innerHTML = '恭喜 <span class="playerO">O</span> 玩家获胜'
            break
        case PLAYERX_WON:
            announcer.innerHTML = '恭喜 <span class="playerX">X</span> 玩家获胜'
            break
        case TIE:
            announcer.innerHTML = '平局'
    }
    announcer.classList.remove('hide')
}

// 循环判断玩家是否获胜
function handleResultValidation() {
    let roundWon = false
    for(let i=0;i<=7;i++){
        const winCondition = winningConditions[i]
        const a = board[winCondition[0]]
        const b = board[winCondition[1]]
        const c = board[winCondition[2]]
        if(a === '' || b === '' || c === ''){
            continue
        }
        if(a === b && b === c){
            roundWon = true
            break
        }
    }

    if(roundWon){
        announce(currentPlayer === 'X' ? PLAYERX_WON : PLAYERO_WON)
        isGameActive = false
        return
    }

    if(!board.includes("")) announce(TIE)
}

// 定义一个函数，交换为到下一个玩家来操作并显示上一个玩家的操作
const userAction = (tile,index) => {
    if(isValidAction(tile) && isGameActive){
        tile.innerText = currentPlayer
        tile.classList.add(`player${currentPlayer}`)
        updateBoard(index)
        handleResultValidation()
        changePlayer()
    }
}

// 循环div，给其绑定事件，并在次点击事件中调用userAction函数
tiles.forEach((tile,index)=>{
    tile.addEventListener('click',()=>userAction(tile,index))
})

// 游戏结束，清空之前留下的数据
const resetBoard = () => {
    board = ['','','','','','','','','']
    isGameActive = true
    announcer.classList.add('hide')

    // 这里如果等于O，就调用changePlayer让当前玩家变回X
    if(currentPlayer === 'O'){
        changePlayer()
    }

    tiles.forEach(tile=>{
        tile.innerText = ''
        tile.classList.remove('playerX')
        tile.classList.remove('playerO')
    })
}

// 在按钮绑定的点击事件中调用resetBoard方法。
resetButton.addEventListener('click',resetBoard)